<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>用户登录</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body{background: #fff;overflow: auto !important; }
			.mui-icon {font-size: 0.85rem;color: #fff;position: absolute !important;top: 0.54rem;left: 0.34rem;z-index: 1000;}
			.bgm{width: 100%;position: absolute;top: 0;left: 0; z-index: 1;}
			.logo{width: 3.55rem;position: absolute;z-index: 1000;left: 1.93rem;top:1.42rem;}
			.input_box{width: 100%;height: 1.82rem;margin: 0;padding: 0;position: absolute;top: 3.46rem;left: 0;}
			.input_box li{width: 100%;height: 0.91rem;padding-left:1.4rem ;box-sizing: border-box;position: relative;}
			.input_box input{width: 100%;height: 100%;border: none;padding: 0;margin: 0;font-size:0.3rem;}
			.input_box input::-webkit-input-placeholder {font-size:0.26rem;color: #cccccc;} 
			.input_box li:first-child{background: url(../../images/menu/username.png) no-repeat center;background-position-x:0.75rem;background-size:0.3rem;}
			.input_box li:last-child{background: url(../../images/menu/pwd.png) no-repeat center;background-position-x:0.75rem;background-size:0.3rem;}
			.mui-icon-eye{font-size: 0.45rem !important;position: absolute !important;left: 6.48rem !important;color: #d6d6d6 !important;}
			.mui-active{color: #007aff !important;}
			.mui-icon-clear{font-size: 0.45rem !important;position: absolute !important;left: 5.8rem !important;color: #d6d6d6 !important;}
			.info{color: #666666;left:0;width: 100%;height: 0.39rem;;font-size: 0.18rem;position: absolute;top: 6.4rem;padding-left: 1.16rem;background: url(../../images/menu/check.png) no-repeat center;background-position-x: 0.82rem;background-size: 0.24rem;}
			.login{width: 6rem;height: 0.68rem;background: #117afd;font-size: 0.3rem;color: #fff;border: none;outline: none;position: absolute !important;top:6.09rem  !important;left: 0.75rem !important;border-radius: 0.1rem;}
			.register{width: 6rem;height: 0.68rem;background: #fff;font-size: 0.3rem;color: #117afd;position: absolute !important;top:7.0rem  !important;left: 0.75rem !important;border-radius: 0.1rem;}
			hr{width: 6.95rem;height:1px;position: relative;top: 10.53rem;background: #d6d6d6;border: none;}
			.text{color: #333333;width: 2rem;height: 0.38rem;position: absolute;top:10.49rem; font-size: 0.24rem;background: #fff;text-align: center;left: 2.76rem;}
			.recover_psd{color: #333333;width: 90%;height: 0.38rem;position: absolute;top:5.49rem; font-size: 0.24rem;background: #fff;text-align: right;color: #007aff;/*left: 2.76rem;*/}
			.btn_box{width: 100%;height: 1.23rem;position:absolute;top: 11.21rem;left: 0;}
			.btn_box .btnicon{width: 100%;height: 0.64rem;position:relative}
			.btn_box .btninfo{color:#444444;width: 100%;height: 0.59rem;position: relative;}
			.btn_box .btnicon img{width: 0.64rem;position: absolute}
			.wechat{left: 1.57rem;}
			.ali{left: 3.43rem;}
			.sina{left: 5.35rem;}
			.btn_box .btninfo p{color:#444444;font-size: 0.24rem;position: absolute;margin: 0 !important;padding: 0 !important;bottom: 0;}
			.wx{left: 1.6rem;}
			.zfb{left:3.39rem;}
			.xl{left: 5.42rem;}
			.mui-table-view:before{height: 0;}
			.mui-table-view:after{height: 0;}
			.mui-table-view-cell:after{width: 6.92rem;left: 0.29rem;background: #eeeeee;}

		</style>
	</head>
	<body>
		<a class="mui-action-back mui-icon mui-icon-closeempty"></a>
		<img src="../../images/menu/bgm.png" alt="" class="bgm" />
		<img src="../../images/menu/logo1.png" alt="" class="logo" />
		<!--输入表单-->
		<ul class="input_box mui-table-view" id="mui-content">
				<li  class="mui-input-row mui-table-view-cell">
					<input class="mui-input-clear" id="loginUserName" type="text" placeholder="用户名、手机号、身份证"/>
				</li>
				<li class="mui-input-row mui-table-view-cell">
					<input class="mui-input-password mui-input-clear" id="loginPword" type="password" placeholder="请输入密码" />
				</li>
		</ul>
		<!--<div class="info">您已阅读了<a href="#">《政务服务网协议》</a></div>-->
		<button class="login mui-btn mui-btn-primary">登录</button>
		<button class="register mui-btn mui-btn-primary mui-btn-outlined">注册</button>
		<div class="recover_psd">忘记密码?</div>
		<!--第三方登录-->
		<hr/>
		<div class="text">第三方快捷登录</div>
		<div class="btn_box">
			<div class="btnicon">
				<img src="../../images/menu/wechat1.png" alt="" class="wechat" />
				<img src="../../images/menu/alibaba.png" alt="" class="ali" />
				<img src="../../images/menu/sina1.png" alt="" class="sina" />
			</div>
			<div class="btninfo">
				<p class="wx">微信</p>
				<p class="zfb">支付宝</p>
				<p class="xl">新浪</p>
			</div>
		</div>
	</body>
	<script>
		function my_immersed(immersed){
			
		}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/app.js" ></script>
	<script src="../../js/md5.min.js" ></script>
	<script>
		/*var info = document.querySelector('.info');
		var i = 0;
		info.onclick = function(){
			if(i == 0 ){
					this.style.background="url(../../images/menu/checked.png) no-repeat center";
					this.style.backgroundPositionX = "0.1rem";
					this.style.backgroundSize = '0.24rem';
					i = 1;
				
			}else if(i==1){
					this.style.background="url(../../images/menu/check.png) no-repeat center";
					this.style.backgroundPositionX = "0.1rem";
					this.style.backgroundSize = '0.24rem';
					i = 0;
			}
		}*/
		mui.plusReady(function(){
			closeWaitingAndShowView();
		})
		function toMain () {
			var app_index = plus.webview.getLaunchWebview();
			mui.fire(app_index, 'loginRefresh', {'flag': 1});
		};
		//注册
		document.querySelector('.register').addEventListener('tap',function(){
			var url = '_www/src/login/register.html';
			showTemplates('register.html','',url);
			//mui.back();
		});
		//登录
		document.querySelector('.login').addEventListener('tap',function(){
			var loginUserName = document.getElementById('loginUserName').value;
			var loginPword = document.getElementById('loginPword').value;
			if (!loginUserName) {
				mui.toast('用户名不能为空');
				return;
			}
			if (!loginPword) {
				mui.toast('密码不能为空');
				return;
			}
			var url = 'appHttpService/appLoginNetUser.do';
			var param = {"loginUserName":loginUserName,"loginPword":md5(loginPword)};
			utils.ajax(url,function(data){
				var data = JSON.parse(data);
				if (data.state == '1') {
					//保存登录时的TOKEN
					localStorage.setItem('TOKEN',data.token);
					createState(data.result, function(){
						var wv = plus.webview.currentWebview();
						if(wv.isJump){
							toMain();
						}else{
							wv.close('zoom-fade-in',mui.os.android ? 200 : 300);
						}
					});
				} else {
					mui.toast(data.result);
				}
			},jsonToParams(param),null,function(){
				mui.toast('抱歉，当前服务不可用，请稍后再试');
			})
		});
		//第三方登录
		mui('.btnicon').on('tap','img',function(){
			mui.toast('功能暂未开放');
		})
		//找回密码
		document.querySelector('.recover_psd').addEventListener('tap',function(){
			var loginUserName = document.getElementById('loginUserName').value.trim();
			if (!loginUserName) {
				mui.toast('请输入账号后再进行密码找回操作！');
				return;
			}
			utils.ajax('appHttpService/isUserExcisied.do',function(data){
				var data = JSON.parse(data);
				if (data.state == '0') {
					var params = {"loginUserName":loginUserName};
					params.phone = data.phone;
					params.email = data.email;
					localStorage.setItem('quesA',data.quesA);
					localStorage.setItem('quesB',data.quesB);
					showTemplates('recoverPassword1.html','找回密码','_www/src/login/recoverPassword1.html?'+jsonToParams(params));
				} else {
					mui.toast(data.msg);
				}
			},'account='+loginUserName,null,function(){
				mui.toast('抱歉，当前服务不可用，请稍后再试');
			});
		})
	</script>
</html>